<template>
	<view class="container">
		<view class="head bg-colorP" :style="[{height:CustomBar+190+'px'},{paddingTop:CustomBar+'px'}]">
			<view class="come-back" @click="comeBack">
				<text class="cuIcon-back"></text>
			</view>
			<view class="rlue" @click="goRule">
				<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/question.png" mode=""></image>
				<text>积分规则</text>
			</view>
			<view class="align-cont">
				<view class="align-cont-nei">
					<view class="">当前购物积分</view>
					<view class="">{{info.jifen}}</view>
					<!-- 跳转商城   暂不显示 -->
					<view class="" @click="clickSignIn">{{userInfo.is_sign?'已签到':'立即签到'}}</view>
					<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/wallet-bg.png" mode=""
					 class='wallet-bg'></image>
				</view>
			</view>
		</view>
		<view class="person-content">
			<view class="content" style="margin-bottom: 20rpx;">
				<person-cell v-for="(item,index) in aboutMoney" :key="index" :item.sync="item" @navigate="navigate" :lastClass="(index==aboutMoney.length-1)?'active':''"></person-cell>
			</view>
			<view class="content" style="margin-bottom: 20rpx;">
				<person-cell v-for="(item,index) in aboutIntegral" :key="index" :item.sync="item" @navigate="navigate" :lastClass="(index==aboutIntegral.length-1)?'active':''"></person-cell>
			</view>
			<view class="content" style="margin-bottom: 20rpx;">
				<person-cell v-for="(item,index) in bank" :key="index" :item.sync="item" @navigate="navigate" :lastClass="(index==bank.length-1)?'active':''"></person-cell>
			</view>
			<view class="content" style="margin-bottom: 20rpx;">
				<person-cell v-for="(item,index) in packed" :key="index" :item.sync="item" @navigate="navigate" :lastClass="(index==packed.length-1)?'active':''"></person-cell>
			</view>
			<view class="content" style="margin-bottom: 20rpx;">
				<person-cell v-for="(item,index) in setmall" :key="index" :item.sync="item" @navigate="navigate" :lastClass="(index==setmall.length-1)?'active':''"></person-cell>
			</view>
		</view>
		<!-- 签到 -->
		<view class="sign-in-div" v-if="isSignShow">
			<view class="cont" >
				<view class="">
					签到成功
				</view>
				<view class="">
					<text></text>
					<text>已连续签到{{signCount}}天</text>
					<text></text>
				</view>
				<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/Sign-in-successfully.png" mode=""></image>
				<view class="">
					恭喜签到成功积分+{{signNum}}~
				</view>
				<view class="" @click="navigate('/pages/tabBar/tourism')">
					去选购
				</view>
				<view class="" @click="closeSign">
					<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/Integral-closure.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import personCell from "./component/person-cell"
	export default {
		components: {
			personCell
		},
		data() {
			return {
				CustomBar: this.CustomBar,
				userInfo: {},
				isSignShow: false,
				signNum:'',
				signCount:'',
				aboutMoney: [{
						title: '提现',
						icon: 'https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/drawitem.png',
						type: 'navigate',
						desc: '',
						typeUrl: '/pages/withdrawalrd'
					},
					{
						title: '我的账单',
						icon: 'https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/my-bill.png',
						type: 'navigate',
						desc: '',
						typeUrl: '/pages/particulars?status=1'
					},
				],
				aboutIntegral: [
					// {
					// 	title: '积分卡',
					// 	icon: 'https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/cardExchange.png',
					// 	type: 'navigate',
					// 	desc: '',
					// 	typeUrl: '/pages/scorecard'
					// },
					{
						title: '积分明细',
						icon: 'https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/bill-detail.png',
						type: 'navigate',
						desc: '',
						typeUrl: '/pages/particulars?status=0'
					}
				],
				bank: [{
					title: '银行卡',
					icon: 'https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/bankcard.png',
					type: 'navigate',
					desc: '',
					typeUrl: '/pages/bankCards'
				}],
				packed: [{
					title: '折扣卡',
					icon: 'https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/discountPackage.png',
					type: 'navigate',
					desc: '',
					typeUrl: '/pages/myVoucher'
				}, {
					title: '兑换券',
					icon: 'https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/person-coin.png',
					type: 'navigate',
					desc: '',
					typeUrl: '/pages/coinCertificate'
				}],
				setmall:[
					{
						title: '已购套餐',
						icon: 'https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/already-bought-package.png',
						type: 'navigate',
						desc: '',
						typeUrl: '/pages/myCombo'
					}
				],
				info:''
			}
		},
		onShow(options) {
			this.userInfo = uni.getStorageSync('userInfo')
			this.getWallt()
		},
		methods: {
			clickSignIn(){
				var that = this;
				this.$request({
					url: '/user/add_sign',
					success: res => {
						if (res.data.status == 1) {
							that.isSignShow = true
							that.signNum = res.data.data.number
							that.signCount = res.data.data.count
							var info = that.info
							info.jifen += res.data.data.number
							that.info = info
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			signModel(){},
			goRule() {
				uni.navigateTo({
					url: '/pages/integrationRule?status=1'
				})
			},
			comeBack() {
				var length = getCurrentPages().length
				if (length == 1) {
					uni.switchTab({
						url: '/pages/tabBar/home'
					})
					return
				}
				uni.navigateBack({
					delta: 1
				});
			},
			closeSign(){
				this.isSignShow = false
			},
			getWallt() {
				var that = this;
				this.$request({
					url: '/User/get_user_wallet',
					success: res => {
						if (res.data.status == 1) {
							var info = res.data.data
							// 余额
							if (info.user_money) {
								that.aboutMoney[0].desc = '可提现余额：¥ ' + Number(info.user_money)
							}
							// 银行卡
							if (info.user_bank > 0) {
								that.bank[0].desc = '共' + info.user_bank + '张'
							} else {
								that.bank[0].desc = '赶快添加银行卡~'
							}
							// // 积分卡
							// if(info.integral){
							// 	that.aboutIntegral[0].desc = '共' + info.integral + '张'
							// }else{
							// 	that.aboutIntegral[0].desc = '赶快去消费吧~'
							// }
							// 折扣卡
							if(info.shop_prerogative){
								that.packed[0].desc = '共' + info.shop_prerogative + '张'
							}
							// 兑换券
							if(info.ticket){
								that.packed[1].desc = '还有' + info.ticket + '个商品未领取~'
							}
							that.info = info
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			navigate(url) {
				if (!url) return
				uni.navigateTo({
					url: url,
					fail() {
						uni.switchTab({
							url: url
						})
					}
				})
			},
		}
	}
</script>


<style>
	.item {
		background: #fff;
	}
</style>
<style scoped>
	.come-back {
		position: absolute;
		top: 70rpx;
		left: 20rpx;
	}

	.head {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.rlue {
		width: 146rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		position: absolute;
		top: 140rpx;
		right: 23rpx;
	}

	.rlue image {
		width: 35rpx;
		height: 35rpx;
		margin-right: 10rpx;
		letter-spacing: 1px;
	}

	.rlue text {
		color: #ffffff;
		font-size: 24rpx;
	}

	.align-cont {
		width: 300rpx;
		height: 300rpx;
		background-image: linear-gradient(180deg,
			rgba(255, 255, 255, 1),
			rgba(255, 255, 255, 0));
		box-shadow: 0 0 16px #fff;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-150rpx, -110rpx);
		border-radius: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.align-cont .align-cont-nei {
		width: 281rpx;
		height: 281rpx;
		background-color: #f34930;
		border-radius: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.align-cont .align-cont-nei>view:nth-child(1) {
		font-size: 28rpx;
		line-height: 30rpx;
		letter-spacing: 1rpx;
		color: #ffffff;
		margin-bottom: 25rpx;
		margin-top: 50rpx;
	}

	.align-cont .align-cont-nei>view:nth-child(2) {
		font-size: 56rpx;
		letter-spacing: 1rpx;
		color: #ffffff;
	}

	.align-cont .align-cont-nei>view:nth-child(3) {
		width: 160rpx;
		height: 56rpx;
		background-color: #ffffff;
		box-shadow: 2rpx 4rpx 10rpx 0rpx rgba(206, 36, 10, 0.5);
		border-radius: 28rpx;
		position: absolute;
		bottom: -28rpx;
		left: 50%;
		transform: translateX(-80rpx);
		text-align: center;
		line-height: 58rpx;
		font-size: 30rpx;
		color: #f34930;
		font-weight: bold;
		z-index: 9;
	}

	.wallet-bg {
		width: 274rpx;
		height: 125rpx;
		position: absolute;
		bottom: 0;
		left: 6rpx;
	}

	.head>view:nth-child(1) {
		font-size: 30rpx;
		color: #fff;
		font-weight: bold;
	}

	.head>view:nth-child(2) {
		font-size: 70rpx;
		color: #fff;
	}
	
	.sign-in-div{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0,0,0,.5);
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.sign-in-div .cont{
		width: 640rpx;
		height: 640rpx;
		border-radius: 10rpx;
		background: #fff;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		padding: 40rpx 0;
		background: url('https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/Integral-bg1.png?x-oss-process=image/resize,m_fill,h_320,w_320') no-repeat;
		background-size: 100% 100%;
	}
	
	.sign-in-div .cont>view:nth-child(1){
		font-size: 40rpx;
		font-weight: bold;
		color: #fff;
	}
	
	.sign-in-div .cont>view:nth-child(2){
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.sign-in-div .cont>view:nth-child(2)>text:nth-child(1),
	.sign-in-div .cont>view:nth-child(2)>text:nth-child(3){
		display: inline-block;
		width: 100rpx;
		height: 1rpx;
		background: #fff;
	}
	
	.sign-in-div .cont>view:nth-child(2)>text:nth-child(2){
		font-size: 28rpx;
		color: #fff;
		margin: 0 30rpx
	}
	
	.sign-in-div .cont image{
		width:200rpx;
		height: 180rpx;
	}
	
	.sign-in-div .cont>view:nth-child(4){
		font-size: 24rpx;
		color: #fff;
	}
	
	.sign-in-div .cont>view:nth-child(5){
		width: 360rpx;
		height: 88rpx;
		line-height: 90rpx;
		text-align: center;
		color: #fff;
		border-radius: 90rpx;
		font-size: 36rpx;
		color: rgb(51,51,51);
		background: #fff;
	}
	
	.sign-in-div .cont>view:nth-child(6){
		width: 56rpx;
		height: 72rpx;
		border-radius: 0 0 28rpx 28rpx;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		position: absolute;
		top: 0;
		right: 40rpx;
		background: #fff;
	}
	
	.sign-in-div .cont>view:nth-child(6) image{
		width: 24rpx;
		height: 24rpx;
		margin-bottom: 20rpx;
	}
</style>
